<script setup>
import { computed, ref } from "vue";

let id = 0;
const newTodo = ref("");
const reversed = ref(false);
const hideCompleted = ref(false);
const todos = ref([
  { id: id++, text: "Learn html", done: false },
  { id: id++, text: "Learn vue", done: false },
  { id: id++, text: "Learn java", done: false },
]);

const reversedTodos = ref();
function addTodo() {
  todos.value.push({ id: id++, text: newTodo.value });
  newTodo.value = "";
}

function removeTodo(todo) {
  if (confirm("Are you sure?")) {
    todos.value = todos.value.filter((t) => t !== todo);
  }
}

function sort() {
  reversedTodos.value = [...todos.value].reverse();
  reversed.value = true;
}

const filterTodos = computed(() => {
  return hideCompleted.value ? todos.value.filter((t) => !t.done) : todos.value;
});
</script>
<template>
  <H1>Hello world</H1>
  <form @submit.prevent="addTodo">
    <input v-model="newTodo" placeholder="New todo" required />
    <button>Add todo</button>
  </form>
  <ul>
    <li v-for="todo in filterTodos" :key="todo.id">
      <input type="checkbox" v-model="todo.done" />
      <span :class="{ done: todo.done }">{{ todo.text }}</span>
      <button @click="removeTodo(todo)">X</button>
    </li>
  </ul>
  <li v-show="reversed" v-for="rt in reversedTodos" :key="rt.id">
    {{ rt }}
  </li>
  <button @click="sort">
    {{ reversed ? "倒序" : "正序" }}
  </button>
  <br />
  <button @click="hideCompleted = !hideCompleted">
    {{ hideCompleted ? "显示全部" : "隐藏已完成" }}
  </button>
</template>


<style>
.done {
  text-decoration: line-through;
}
</style>

<!-- 如下的excersize的内容 -->
<!-- <script setup>
import { ref, reactive, computed } from "vue";
let id = 0;
let n = ref(10);
const parentMessage = ref("Parent");
const items = ref([
  { id: id++, message: "Foo" },
  { id: id++, message: "Bar" },
]);
const myObject = reactive({
  title: "How to do lists in Vue",
  author: "Jane Doe",
  publishedAt: "2016-04-10",
});
const numbers = ref([1, 2, 3, 4, 5, 6]);
const evenNumbers = computed(() => {
  return numbers.value.filter((n) => n % 2 === 0);
});
const sortedEvennumbers = computed(() => {
  return [...evenNumbers.value].reverse();
});
</script>
<template>
  <li v-for="item in items" :key="item.id">{{ item.message }}</li>
  <li v-for="(item, index) in items" :key="index">
    {{ parentMessage }}--{{ index }}--{{ item.id }}--{{ item.message }}
  </li>
  <ul>
    <li v-for="(value, key, index) in myObject" :key="value.title">
      {{ index }} {{ key }} {{ value }}
    </li>
  </ul>
  <span v-for="i in n" :key="i">{{ i }}</span>
  <button @click="n++">Add</button>
  <br />
  <template v-for="(item, index) in items" :key="index">
    <li>{{ item }} {{ index }}</li>
    <li class="divider" role="presentation"></li>
  </template>
  <li v-for="n in sortedEvennumbers" :key="n">{{ n }}</li>
</template> -->